<template>
  <div class="info-bar">
    <div class="progress">
      <div class="susses-progress" :style="{ width: min+'%' }"></div>
      <div class="warning-progress" :style="{ width: max+'%' }"></div>
    </div>
    <div class="bar-info flex-space-between">
      <div class="left-info">
        <span class="info-tag"></span>
        <span class="info-result">已{{ unit }}</span>
        <span class="info-sum">{{ min }}</span>
      </div>
      <div class="right-info">
        <span class="info-tag"></span>
        <span class="info-result">待{{ unit }}</span>
        <span class="info-sum">{{ max }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    min: {
      type: Number,
      default: 50
    },
    max: {
      type: Number,
      default: 50
    },
    unit: {
      type: String,
      default: '操作'
    }
  },
  data () {
    return {

    };
  },
  computed: {
  },
  watch: {},
  methods: {

  },
  created () {

  },
  mounted () {

  },
  components: {},
}
</script>

<style lang='less' scoped>
.info-bar {
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(59, 164, 255, 0.6) 0%,
    rgba(59, 164, 255, 0.1) 100%
  );
  border-image: linear-gradient(
      180deg,
      rgba(53, 168, 235, 1),
      rgba(30, 95, 133, 1)
    )
    1 1;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #35a8eb;
  .bar-info {
    .left-info,
    .right-info {
      display: flex;
      align-items: center;
      gap: 5px;
      span {
        display: inline-block;
      }
      .info-tag {
        width: 8px !important;
        height: 8px !important;
      }
      .info-result {
        font-size: 12px;
        color: #d9e7ff;
      }
      .info-sum {
        font-family: Oswald, Oswald;
        font-weight: 400;
        font-size: 12px;
      }
    }
    .left-info {
      .info-tag {
        background: #30dcff;
      }
    }
    .right-info {
      .info-tag {
        background: #ffc97a;
      }
    }
  }
}
.progress {
  display: flex;
  .susses-progress,
  .warning-progress {
    height: 6px;
  }
  .susses-progress {
    background: linear-gradient(
      90deg,
      rgba(102, 225, 223, 0.7) 0%,
      #66e1df 100%
    );
    clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    position: relative;
  }
  .warning-progress {
    background: linear-gradient(
      90deg,
      #ffc97a 0%,
      rgba(255, 201, 122, 0.7) 100%
    );
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background-color: #0b1a28;
      transform-origin: top left;
      transform: skewX(320deg);
    }
  }
}
</style>